Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[datetime2] feat: DateRangePicker3 using react-day-picker v8 #6375

Merged
merged 36 commits into from
Sep 18, 2023

Conversation

adidahiya
Copy link
Contributor

@adidahiya adidahiya commented Sep 7, 2023

Related to #5652, #5699 - necessary to unblock React 18 support

Checklist

  • Includes tests
  • Update documentation

Changes proposed in this pull request:

Add new "v3" variant of DateRangePicker which uses react-day-picker v8.

Implementation notes:

  • our custom disabledDays modifier is no longer required, this is automatically handled by specifying fromDate and toDate (same goes for DatePicker3 which already merged)
  • I've refactored much of the implementation to use function components (however the root component is still a class)
  • We now leverage rdp's built-in range picker support with mode="range" and numberOfMonths={2}. This works for single month range pickers and contiguous dual-month pickers.
    • rdp does not, however, have support for non-contiguous range pickers. We have to continue implementing this ourselves using multiple DayPickers, just like we did with rdp v7.
    • you can see the different approaches & use of different rdp custom components in NonContiguousDayRangePicker / ContiguousDayRangePicker.

Reviewers should focus on:

  • No regressions compared to DateRangePicker
  • Test coverage
  • Documentation

Screenshot

Single month picker (note the new location of prev/next month navigation buttons now that we delegate to rdp to render the caption):

2023-09-11 15 37 51

Contiguous two month picker:

2023-09-11 15 36 43

Non-contiguous two month picker:

2023-09-11 15 38 34

@adidahiya
Copy link
Contributor Author

progress on non-contiguous range picker

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@adidahiya
Copy link
Contributor Author

fix lint

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@adidahiya
Copy link
Contributor Author

remove unused code; destructure props

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@adidahiya
Copy link
Contributor Author

export symbols in datetime public API for use in datetime2

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@adidahiya
Copy link
Contributor Author

adidahiya commented Sep 12, 2023

There is a bug with non-contiguous calendars near the min/max date boundaries. The fromDate and toDate props are not being set correctly in the two calendars. It should probably be fromMonth (for right cal) and toMonth (for left cal) instead.

image

edit: fixed

@adidahiya
Copy link
Contributor Author

minor cleanup

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@adidahiya
Copy link
Contributor Author

adjust some classes, fix some tests

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@adidahiya
Copy link
Contributor Author

[datetime] fix tests

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@adidahiya adidahiya marked this pull request as ready for review September 13, 2023 22:09
@adidahiya
Copy link
Contributor Author

fix lint

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@adidahiya adidahiya merged commit 7502803 into develop Sep 18, 2023
@adidahiya adidahiya deleted the ad/date-range-picker3 branch September 18, 2023 16:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant